<template>
  <view class="home">
    <!-- 头部 start -->
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      leftBtnShow="true"
      backgroundImage="linear-gradient(#3388FF, #6197f8)"
      :border="false"
      leftIcon="back"
      color="#fff"
      @clickLeft="clickLeft"
    >
       <view class="uni-title">{{title}}</view>
    </uni-nav-bar>
    <!-- 头部 end -->

    <!-- 内容 start -->
    <view class="content" :style="{height: (offsetHeight-offsetTop+24)+'px'}">
      <view class="title flex ">
        <view class="icon iconfont icon-yilanjian"></view>
        <view class="name">药品物流信息</view>
      </view>
      <view class="express-status innerBox">
        <view class="status">快递状态</view>
            <!-- 操作码(opCode)     操作名称（opName 【生产环境以实际的为准】）
            30 快件在【XXX营业点】已装车,准备发往 【XXX集散中心】
            31 快件到达 【XXX集散中心】
            36 快件到达 【XXX集散中心】
            44 正在派送途中,请您准备签收(派件人:XXX,电话:XXX)
            43 收件入仓 京东速运 已收取快件
            50 京东已收件
            130 便利店交接 快件到达京东店/站 %s
            123 便利店出仓 快件正送往京东店/站 %s
            607 代理收件 代理收件
            80 已签收,感谢使用京东,期待再次为您服务
            3036 快件在XXX ,准备送往下一站
            70 由于XXX原因 派件不成功
            8000 在官网"运单资料&签收图",可查看签收人信
            33 派件异常原因
            99 应客户要求,快件正在转寄中
            648 快件已退回/转寄,新单号为: XXX
            204 快件交给%s，正在派送途中（联系电话：%s）
            125 快递员派件至丰巢
            126 快递员取消派件将快件取出丰巢
            80 已签收,感谢使用京东,期待再次为您服务
            3036 快件在XXX ,准备送往下一站
            70 由于XXX原因 派件不成功
            8000 在官网"运单资料&签收图",可查看签收人信
            33 派件异常原因
            99 应客户要求,快件正在转寄中
            648 快件已退回/转寄,新单号为: XXX
            204 快件交给%s，正在派送途中（联系电话：%s）
            125 快递员派件至丰巢
            126 快递员取消派件将快件取出丰巢 -->
        <view class="express" v-if="expressList.length > 0">
          <view v-for="(item,index) in expressList" :key="index" class="express-list">
            <view>
              <view class="express-status flex"  v-if="item.status !== 99">
              <!-- des:  0(未揽件) =>weilanjian  1(已揽件)=> opCode  2(配送中)=> peisongzhong   3(已签收) =>yiqianshou-->
                <view class="icon iconfont" :class="item.opCode == 0 ? 'icon-weilanjian' : item.opeTitle == '配送员完成揽收' || item.opeTitle == '上门接货' ? 'icon-yilanjian' : item.opeTitle == '站点装箱发货' || item.opeTitle == '分拣中心发货' ? 'icon-peisongzhong' : item.opeTitle == '配送员收货' ? 'icon-kuaidiyuan': item.opeTitle == '外呼' ? 'icon-yijianhujiao': item.opeTitle == '揽收任务分配' ? 'icon-fenpei' : item.opeTitle.indexOf('验货') > -1 ? 'icon-yanhuo': item.opeTitle.indexOf('收货') > -1 ? 'icon-yishouhuo': item.opeTitle == '分拣中心分拣' ? 'icon-jianhuo' :  item.opeTitle == '快递签收' ? 'icon-shoudaode' : 'icon-yiqianshou'"></view>
              </view>
              <view v-else class="express-status noStatus"></view>
              <view class="express-title">{{item.opeTitle}}</view>
              <!-- <view class="express-title">{{item.opCode}}</view> -->
              <view class="express-date">{{item.opeTime}}</view>
              <view class="express-des">{{item.opeRemark}}</view>
            </view>
          </view>
        </view>
        <view v-else class="express">
          暂未揽件
        </view>
      </view>
      <view class="express-status innerBox" v-if="orderDes">
        <view class="status">配送信息</view>
        <view class="distribution">
          <view class="flex">
            <view class="label">收货地址</view>
            <view>
              <view>{{orderDes.destName}} {{orderDes.destMobile}}</view>
              <view class="address">{{orderDes.destAddress}}</view>
            </view>
          </view>
        </view>
        <!-- <view class="express plan-date flex">
          <view>预计配送时间</view>
          <view>2022-10-26</view>
        </view> -->
      </view>
      <view class="express-status innerBox" v-else>
        <view class="status">配送信息</view>
        <view class="distribution">
          <view class="flex">
            <view class="label">收货地址</view>
            <view>
              <view>{{detailsInfo.destName}} {{detailsInfo.destMobile}}</view>
              <view class="address">{{detailsInfo.destAddress}}</view>
            </view>
          </view>
        </view>
        <!-- <view class="express plan-date flex">
          <view>预计配送时间</view>
          <view>2022-10-26</view>
        </view> -->
      </view>
      <view class="express-status innerBox">
        <view class="status">药品信息</view>
        <view class="drugInfo flex" v-for="(item,index) in drugsList" :key="index">
          <view class="drugImg">
            <view class="icon iconfont icon-yaopin-3" style="font-size: 160rpx;color:#3388FF"></view>
          </view>
          <view class="drugDes">
            <view style="font-weight: 500;">{{item.drugGenericName}}</view>
            <view class="count" style="color: #777777;">*{{item.spec}}</view>
          </view>
          <view class="drugPrice flex">
            <view>￥{{item.hospPrice}}</view>
            <view class="count">*{{item.amount}}</view>
          </view>
        </view>
      </view>
      <view class="price innerBox" v-if="orderDes">
        <view class="flex">
          <view>药品金额</view>
          <view class="price-des">￥{{orderDes.goodsFee}}</view>
        </view>
        <view class="flex">
          <view>运费</view>
          <view class="price-des">￥{{orderDes.expFee}}</view>
        </view>
        <view class="flex all-price">
          <view>实付款：</view>
          <view class="price-des price-all">￥{{orderDes.totalAmount}}</view>
        </view>
      </view>
      <view class="price innerBox" v-else>
        <view class="flex">
          <view>药品金额</view>
          <view class="price-des">￥{{detailsInfo.goodsFee}}</view>
        </view>
        <view class="flex">
          <view>运费</view>
          <view class="price-des">￥{{detailsInfo.expFee}}</view>
        </view>
        <view class="flex all-price">
          <view>实付款：</view>
          <view class="price-des price-all">￥{{detailsInfo.totalAmount}}</view>
        </view>
      </view>
      <view class="explain">发票或者其他问题，请联系 13889110151</view>
    </view>
    <!-- 头部信息 start -->
    <!-- 头部信息 end -->

  </view>
</template>

<script>
import hccmStore from "@/common/hccm-store.js"
import mRequest from "@/api/home"
import hccmConfig from "@/common/hccm-config.js"
import dict from '@/static/js/dict.json'
export default {
  data() {
    return {
      offsetTop: hccmStore.getOffsetTop(), //安全高度
      offsetHeight:  hccmStore.getOffsetHeight(), //安全高度
      title: '物流信息',
      expressList: [],
      prescriptionId:'',
      detailsInfo:{},
      drugsList:[],
      chufangInfo:{},
      hospId:'',
      orderDes:null
    }
  },
  onLoad(options) {
    this.prescriptionId=options.prescriptionId
    if(options.chufangInfo){
      this.chufangInfo = JSON.parse(options.chufangInfo)
    }
    if(options.orderDes){
      this.orderDes = JSON.parse(options.orderDes)
    }
    if(options.drugsList){
      this.drugsList = JSON.parse(options.drugsList)
    }else{
      this.getPrescriptionDetail()
    }
    console.log(this.orderDes)
    this.hospId = options.hospId
    this.getOrder()
  },
  onShow() {
  },
  methods: { 
    getOrderDetail(){
      let params = {
        orderId: this.orderId
      }
      mRequest.getOrderDetail(params).then(
        res => {
          this.drugsList = res.responseData
        },
        error => {
          console.log(error)
        }
      )
    },
    // 处理快递状态
    expStatusStr(val){
      return dict.expStatus.filter(item=>{
        return item.value == val
      })[0].label
    },
    clickLeft(){
      uni.navigateBack()
    },
    // 获取处方详情
    getPrescriptionDetail(){
      let params = {
        prescriptionId: this.prescriptionId,
      }
      mRequest.getPrescriptionDetail(params).then(
        res => {
          this.drugsList = res.responseData
        },
        error => {
          console.log(error)
        },
      )
    },
    listOrderRoute (yfzOrderId) {
      let params = {
        yfzOrderId
      }
      mRequest.listOrderRoute(params).then(
        res => {
          this.expressList = JSON.parse(res.message.slice(res.message.indexOf('message:')+8)).jingdong_ldop_receive_trace_get_responce.querytrace_result.data.reverse()
          console.log(JSON.parse(res.message.slice(res.message.indexOf('message:')+8)).jingdong_ldop_receive_trace_get_responce.querytrace_result.data,3333)
        },
        error => {
          console.log(error)
        }
      )
    },
    getOrder () {
      let params = {
        currentPage: 1,
        pageSize: 100,
        prescriptionIds: this.prescriptionId,
      }
      if(this.hospId){
        params.hospId = this.hospId
      }else{
        params.hospId = this.chufangInfo.hospId
      }
      console.log(params)
      mRequest.getOrderByPreIdAndHospIds(params).then(
        res => {
          console.log(res,'reddddd')
          let aaa = res.responseData.filter(item => {
            return item.prescriptionId == this.prescriptionId
          })
          if(aaa.length > 0){
            this.detailsInfo = aaa[0]
            this.listOrderRoute(this.detailsInfo.yfzOrderId)
            this.orderId = this.detailsInfo.orderId
            // aaa.map((item) => {
            //   if (item.orderStatus == this.chufangInfo.orderStatus) {
            //     this.detailsInfo = item
            //     this.listOrderRoute(this.detailsInfo.yfzOrderId)
            //     this.orderId = this.detailsInfo.orderId
            //   }
            // })

          }
          
        },
        error => {
          console.log(error)
        }
      )
    },
  },
}
</script>

<style lang="scss">
@import "@/static/css/index.scss";
// begin
.home {
  height: 100%;
  overflow: hidden;
  .content{
    overflow: auto;
    background-image: linear-gradient(#6197f8, #f5f5f5, #f5f5f5);
    padding: 30rpx 30rpx 0;
    .title{
      justify-content: flex-start;
      color: #fff;
      font-size: 38rpx;
      margin-bottom: 40rpx;
      .iconfont{
        font-size: 50rpx;
        padding-right: 20rpx;

      }
    }
    .innerBox{
      margin-bottom: 24rpx;
      width: 100%;
      box-sizing: border-box;
      padding: 32rpx 24rpx;
      background: #fff;
      border-radius: 16rpx;
      .status{
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 24rpx;
      }
      .express{
        width: 100%;
        box-sizing: border-box;
        padding: 26rpx 24rpx 26rpx 46rpx;
        background: #F6F6F6;
        border-radius: 16rpx;
        .express-list{
          padding-left: 44rpx;
          padding-bottom: 12rpx;
          border-left: 2rpx solid #E2E2E2;
          position: relative;
          .express-title{
            font-size: 28rpx;
            color: #333;
            padding: 8rpx 0 4rpx;
            font-weight: 600;
          }
          .express-date{
            font-size: 24rpx;
            color: #777;
            padding: 2rpx 0 8rpx;
            font-weight: 400;
          }
          .express-des{
            font-size: 26rpx;
            color: #666666;
            font-weight: 400;
          }
          .express-status{
            position: absolute;
            left: -26rpx;
            top: 0;
            height: 52rpx;
            width: 52rpx;
            background: #CACBCD;
            border-radius: 50%;
            .iconfont{
              color: #fff;
              font-size: 34rpx;
              font-weight: 400;
            }
          }
          .noStatus{
            height: 16rpx;
            width: 16rpx;
            left: -8rpx;
            top: 24rpx;
          }
        }
        .express-list:last-of-type{
          border-left: none;
        }
      }
    }
    // 配送信息
    .distribution{
      .flex{
        justify-content: flex-start;
        align-items: flex-start;
        color: #333333;
        font-size: 28rpx;
        .label{
          color:#777777;
          padding-right: 16rpx;
        }
        .address{
          padding: 16rpx 0;
        }
      }
    }
    // 药品信息
    .drugInfo{
      margin-bottom: 20rpx;
      .drugImg{
        height: 160rpx;
        width: 160rpx;
        border-radius: 16rpx;
        background: #F6F6F6;
        margin-right: 24rpx;
      }
      .drugDes{
        flex: 1;
        height: 120rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-size: 30rpx;
      }
      .drugPrice{
        height: 120rpx;
        color: #000000;
        font-size: 32rpx;
        font-weight: 600;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-around;
        .count{
          color: #777777;
          font-size: 24rpx;
          font-weight: 400;
        }
      }
    }
    .plan-date{
      margin-top: 18rpx;
      justify-content: space-between;
      font-size: 28rpx;
      color: #E86D03;
      background: #FFF5ED !important;
    }
    .price{
      .flex{
        font-size: 28rpx;
        justify-content: space-between;
        padding: 16rpx 0;
        color: #666666;
        .price-des{
          color: #333;
          font-weight: 600;
          font-size: 30rpx;
        }
      }
      .all-price{
        font-weight: 600;
        justify-content: flex-end;
        color: #333;
        .price-des{
          color: #3388FF;
          font-size: 34rpx;
        }
      }
    }
  }
}
</style>
